<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #slideshow {
            width: 800px;
            height: 350px;
            margin: 0 auto;
            /*设置在页面水平居中*/
            overflow: hidden;
            position: relative;
        }

        #slideshow img {
            width: 800px;
            position: absolute;
            /*图片采取绝对定位，均位于左上角，重叠在一起*/
            top: 0;
            left: 0;
            opacity: 0;
            /*初始不透明度为0，图片都看不见*/
            transition: opacity 1s linear;
            /*--重点--定义一个关于透明度的transition*/
        }

        #slideshow img.active {
            opacity: 1;
            /*有active类的图片不透明度为1，即显示图片*/
        }

        /*-- 设置页码的样式 --*/
        #slideshow div {
            width: 100%;
            position: absolute;
            bottom: 10px;
            text-align: center;
        }

        #slideshow span {
            display: inline-block;
            width: 25px;
            line-height: 25px;
            /*当只有一行文本时height等于line-height*/
            border-radius: 25px;
            /*设置页码为圆形*/
            margin: 0 15px;
            background: white;
            font-size: 16px;
        }

        #slideshow span.active {
            color: white;
            background: #FFDD55;
        }

        /*-- 设置图片描述文本的样式 --*/
        #slideshow p {
            position: absolute;
            top: 30px;
            left: -400px;
            /*相对于轮播图左侧左移400px*/
            line-height: 30px;
            padding: 5px 30px;
            font-size: 20px;
            color: white;
            background-color: rgba(100, 100, 100, 0.6);
            /*用rgba设置一个带透明度的背景颜色*/
            opacity: 0;
            transition: all 0.5s;
        }

        #slideshow p.active {
            left: 0;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="slideshow">
        <!-- 插入轮播的图片们 -->
        <img class="active" src="https://images.unsplash.com/photo-1730722005859-f93a79460bae?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        <img src="https://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
        <img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
        <!-- 插入轮播的页码们 -->
        <div>
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <!-- 插入图片的描述们 -->
        <p class="active">这是第一幅图片哈哈哈</p>
        <p>这是第二幅图片咩</p>
        <p>到第三幅了！</p>
    </div>

    <script>
        //---------主角：轮播图函数-------------
        function slideshow() {
            var slideshow = document.getElementById("slideshow"),
                imgs = slideshow.getElementsByTagName("img"), //得到图片们
                pages = slideshow.getElementsByTagName("span"), //得到页码们
                descrips = slideshow.getElementsByTagName("p"), //得到描述们
                current = 0; //current为当前活跃的图片编号

            function slideOff() {
                imgs[current].className = ""; //图片淡出
                pages[current].className = "";
                descrips[current].className = "";
            }
            function slideOn() {
                imgs[current].className = "active"; //图片淡入
                pages[current].className = "active";
                descrips[current].className = "active";
            }

            function changeSlide() { //切换图片的函数
                slideOff();
                current++; //自增1
                if (current >= 3) current = 0;
                slideOn();
            }

            //每2s调用changeSlide函数进行图片轮播
            var slideon = setInterval(changeSlide, 2000);

            slideshow.onmouseover = function () {
                clearInterval(slideon); //当鼠标移入时清除轮播事件
            }
            slideshow.onmouseout = function () {
                slideon = setInterval(changeSlide, 2000); //当鼠标移出时重新开始轮播事件
            }

            for (var i = 0; i < pages.length; i++) { //定义鼠标移入和移出页码事件
                pages[i].onmouseover = function () {
                    slideOff(); //图片淡出
                    current = this.innerHTML - 1; //得到鼠标停留的页码对应的current
                    slideOn(); //图片淡出
                }
            }

        }

        slideshow();
    </script>


</body>

</html>